.control{
  display: flex;
  align-items: center;
  .action{
    width: 15%;
    display: flex;
    margin-right: 2%;
    justify-content: space-around;
    span{
      display: inline-block;
      width: 18px;
      height: 18px;
      vertical-align: sub;
      cursor: pointer;
      margin-right: 20px;
    }
    .quickPrev{
      background: url("./images/icon_PREV-grey.png") center no-repeat;
      background-size: 94%;
      &:hover{
        background: url("./images/icon_PREV-hover.png") center no-repeat;
        background-size: 94%;
      }
    }
    .quickNext{
      background: url("./images/icon_NEXT-grey.png") center no-repeat;
      background-size: 94%;
      &:hover{
        background: url("./images/icon_NEXT-hover.png") center no-repeat;
        background-size: 94%;
      }
    }
    .isPlay{
      background: url("./images/icon_play-grey.png") center no-repeat;
      background-size: 94%;
      &:hover{
        background: url("./images/icon_play.png") center no-repeat;
        background-size: 94%;
      }
    }
    .isPause{
      background: url("./images/icon_pause-grey.png") center no-repeat;
      background-size: 94%;
      &:hover{
        background: url("./images/icon_pause.png") center no-repeat;
        background-size: 94%;
      }
    }
  }
  .progress{
    width: 64%;
    margin-right: 3%;
    .progress_info{
      display: flex;
      justify-content: space-between;
      span {
        &:first-child {
          width: calc(100% - 140px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  audio {
    display: none;
  }
  .inputTime {
    display: flex;
    align-items: center;
    :global {
      .el-input {
        width: 90px;
        margin-right: 5px;
      }
      .el-button {
        margin-right: 5px;
      }
    }
  }
  .volume{
    width: 15%;
    display: flex;
    align-items: center;
    margin: 0 15px 0 5px;
    >div{
      display: inline-block;
      width: 70px;
    }
    >span{
      display: inline-block;
      width: 18px;
      height: 18px;
      vertical-align: sub;
      cursor: pointer;
      margin-right: 15px;
    }
    .isUnmute{
      background: url("./images/icon_volume-grey.png") center no-repeat;
      background-size: 100% 100%;
      &:hover{
        background: url("./images/icon_volume.png") center no-repeat;
        background-size: 100% 100%;
      }
    }
    .isMute{
      background: url("./images/icon_mute-grey.png") center no-repeat;
      background-size: 100% 100%;
      &:hover{
        background: url("./images/icon_mute-hover.png") center no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
